<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.list {
				width: 100%;
				/* 边框崩塌：崩塌——边框合并 */
				border-collapse: collapse;
			}
			/* 注意此处的选择器！！——浏览器会自动为table添加tbody */
			.list > tbody > tr:not(:last-child) {
				/* 除了最后一行都添加下边框 */
				border-bottom: 1px  solid  #f00;
			}
			.list > tbody > tr:nth-child(2n+1) {
				/* 奇数行背景色 */
				background-color: #dfd;
			}
			.list > tbody > tr:nth-child(2n) {
				/* 偶数行背景色 */
				background-color: #ddf;
			}
			.list > tbody > tr:hover {
				/* 鼠标悬停的行修改背景色 */
				background-color: #fdd;
			}
		</style>
	</head>
	<body>
		<h3>仿学子商城的数据表格效果</h3>
		<!-- table>tr*6>td*4 -->
		<table class="list">
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
				<td>14</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
				<td>34</td>
			</tr>
			<tr>
				<td>41</td>
				<td>42</td>
				<td>43</td>
				<td>44</td>
			</tr>
			<tr>
				<td>51</td>
				<td>52</td>
				<td>53</td>
				<td>54</td>
			</tr>
			<tr>
				<td>61</td>
				<td>62</td>
				<td>63</td>
				<td>64</td>
			</tr>
		</table>
	</body>
</html>
